<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{margin:0;padding:0;}
  </style>
</head>
<body>
  
</body>
<script type="importmap">
  {
		"imports": {
			"three": "../build/three.module.js"
		}
	}
</script>
<script type="module">
  import * as THREE from 'three';
  // 创建场景
  const scene = new THREE.Scene()
  // 创建相机
  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  // 创建一个几何体
  const geometry = new THREE.BoxGeometry(1, 1, 1); 
  // 创建一个材质：红色
  const material = new THREE.MeshBasicMaterial( { 
    color: 0xff0000
  });
  // 创建一个网格模型（将几何体和材质结合）
  const cube = new THREE.Mesh( geometry,  material);
  // 将网格模型添加到场景中
  scene.add(cube);
  // 微调相机位置，否则相机默认在0,0,0的位置，无法观察到元素
  camera.position.z = 5;
  // 将3D场景和相机都添加到渲染器中（在canvas内绘制）
  renderer.render( scene, camera );

  // 让立方体动起来（方便观察）
  function animate(){
    requestAnimationFrame(animate);
    // 旋转立方体
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 渲染器执行render方法来执行最终的渲染
    renderer.render( scene, camera )
  }
  animate();
</script>
</html>